<template>
  <page-container>
    <a-card>
      <a-form :form="form">
        <a-row>
          <a-col :span="12">
            <a-form-item label="指标类型" :label-col="{ span: 3 }" :wrapper-col="{ span: 15 }" style="margin-bottom: 0;">
              <a-select
                v-decorator="[
                  'gender',
                  {
                    initialValue:  initialValue
                  }
                ]"
                placeholder="Select a option and change input text above"
                @change="handleSelectChange"
              >
                <a-select-option value="T/F类型">
                  T/F类型
                </a-select-option>
                <a-select-option value="分值类型">
                  分值类型
                </a-select-option>
                <a-select-option value="公式类型">
                  公式类型
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <a-card class="card">
      <!-- <transition name="fade"> -->
        <ScoreForm  v-show="Score" :new_create='fuzujian'/>
        <SumForm v-show="Sum" :new_create='fuzujian'/>
        <TOrFForm v-show="TOrF" :new_create='fuzujian' />
      <!-- </transition> -->
    </a-card>
  </page-container>
</template>

<script>
import { ScoreForm, SumForm, TOrFForm } from './type'

export default {
  data () {
    return {
      form: this.$form.createForm(this, { name: 'coordinated' }),
      Score:'',
      Sum: '',
      TOrF: '',
      id:'',
      initialValue: '',
      fuzujian:''
    }
  },
  components: {
    ScoreForm, SumForm, TOrFForm,
  },
  created() {
    console.log('================================')
    console.log('this.$route.query',this.$route)
    console.log('this.$route.query',this.$route.params.id)
    if(this.$route.params.id === 'xxx'){
      // this.form = this.$form.createForm(this, { name: 'initform' })
      console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>')
      // this.new_create = true
      // console.log('this.initialValue', this.initialValue)
      // console.log('this.new_create', this.new_create)
      console.log('清空策略')
      this.fuzujian = '999'
      this.initialValue = 'T/F类型'
      this.Score = true
    }
    if(this.$route.params.type === 'T/F类型'){
      this.Score = true
      this.initialValue = 'T/F类型'
      this.fuzujian = '9'
    }
    if(this.$route.params.type === '分值类型'){
      this.Sum = true
      this.initialValue = '分值类型'
      this.fuzujian = '8'

    }
    if(this.$route.params.type === '公式类型'){
      this.TOrF = true
      this.initialValue = '公式类型'
      this.fuzujian = '7'

    }
  },
  mounted() {
    // console.log('================================')
    // console.log('mounted')
  },
  methods: {
    handleSelectChange(e){
      console.log(e)
      if(e === 'T/F类型'){
        this.Score = true,
        this.Sum = false,
        this.TOrF = false
      }
      if(e === '分值类型'){
        console.log(2)
        this.Score = false,
        this.Sum = true,
        this.TOrF = false
      }
      if(e === '求和类型'){
        console.log(3)
        this.Score = false,
        this.Sum = false,
        this.TOrF = true
      }
    },
    handleSubmit () {},
  },
}
</script>

<style lang="scss" scoped>
.card {
  margin-top: $margin-sm;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
